<template>
  <div class="data-empty">
    <div class="data-empty--info">
      <div class="imgContainer" v-if="img">
        <img :src="img" alt="">
      </div>
      <div class="tips" :style="tipsStyle">
        {{tips}}
      </div>
    </div>
  </div>
</template>

<script>
import imgUrl from '@/assets/images/armyScreen/暂无数据@2x.png'
export default {
  name: 'DataEmpty',
  props: {
    // ICON大小，默认为12rem
    size: {
      type: Number,
      default: () => 12
    },
    img: {
      type: String,
      default: imgUrl
    },
    tips: {
      type: String,
      default: '暂无数据'
    },
    tipsStyle: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="scss" scoped>
.data-empty {
  opacity: 0.7;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &--info{
    .imgContainer{
      width: 56px;
      height: 56px;
      margin: 0 auto;
      img {
        width: 100%;
        height: auto;
        max-height: 56px;
      }
    }
    .tips{
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(0,0,0,0.36);
      letter-spacing: 0;
      line-height: 18px;
      font-weight: 400;
    }
  }
}
</style>
